<template>
  <view class="feedback">
    <view class="flex-row form-input">
      反馈类型
      <picker
        mode="selector"
        :range="typeList"
        range-key="name"
        @change="handlePickerChange"
      >
        <view :class="[!checkedTypeText && 'empty']">
          {{ checkedTypeText || '请选择' }}
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </picker>
    </view>
    <view class="label">反馈内容</view>
    <view class="form-textarea">
      <textarea
        v-model="formFields.content"
        class="textarea-box"
        placeholder="请输入详细内容"
      />
    </view>
    <view class="label">添加照片</view>
    <view class="grid-box">
      <view v-for="(img, index) in uploadImgs" :key="img" class="grid-item">
        <image
          class="cover-image"
          :src="img"
          mode="aspectFill"
          @click="previewImage(img)"
        />
        <text
          class="iconfont icon-close"
          @click="handleDeleteImg(index)"
        ></text>
      </view>
      <view
        class="grid-item upload-box flex align-center justify-center"
        @click="uploadImgsHandler"
      ></view>
    </view>
    <view class="flex-row form-input">
      联系人
      <input
        v-model="formFields.name"
        class="input-box"
        type="text"
        placeholder="请输入联系人"
      />
    </view>
    <view class="flex-row form-input">
      联系方式
      <input
        v-model="formFields.phone"
        class="input-box"
        type="number"
        maxlength="11"
        placeholder="请输入联系方式"
      />
    </view>
    <button class="btn-primary btn-submit" @click="handleSubmit">提交</button>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { previewImage, uploadFile } from '@/utils'
import { regExp } from '@/utils/regExp'
import { fetchTypeList, postFeedback } from '@/api/feedback'

const uploadImgs = ref([])
const typeList = ref([])
const checkedTypeText = ref('')
const formFields = reactive({
  type_id: 0,
  content: '',
  images: '',
  name: '',
  phone: ''
})

fetchTypeList().then(res => (typeList.value = res))

function handlePickerChange(e) {
  const { value } = e.detail
  const checkedType = typeList.value[value]
  checkedTypeText.value = checkedType.name
  formFields.type_id = checkedType.id
}

function handleSubmit() {
  const showMsg = title => uni.showToast({ title, icon: 'none' })
  if (!formFields.type_id) return showMsg('还没有选择反馈类型')
  if (!formFields.content) return showMsg('还没有填写反馈内容')
  if (!uploadImgs.value.length) return showMsg('还没有上传图片')
  if (!formFields.name) return showMsg('还没有填写联系人')
  if (!formFields.phone) return showMsg('还没有填写联系方式')
  if (!regExp.phoneNumber.test(formFields.phone)) return showMsg('请输入合法手机号')
  formFields.images = uploadImgs.value.join('|')
  const params = {
    ...formFields
  }
  postFeedback(params).then(() => {
    showMsg('已提交')
    uni.navigateBack()
  })
}

function handleDeleteImg(index) {
  uni.showModal({
    title: '提示',
    content: '确定删除这张照片吗？',
    confirmColor: '#377DFF',
    success(res) {
      if (res.confirm) {
        uploadImgs.value.splice(index, 1)
      }
    }
  })
}

function uploadImgsHandler() {
  uni.chooseImage({
    count: 9,
    success: chooseImageRes => {
      const tempFilePaths = chooseImageRes.tempFilePaths
      for (const path of tempFilePaths) {
        uni.showLoading({ title: '正在上传...' })
        uploadFile(path)
          .then(res => {
            uploadImgs.value.push(res)
          })
          .finally(uni.hideLoading)
      }
    }
  })
}
</script>

<style scoped lang="scss">
.feedback {
  display: flow-root;
  padding-left: 30rpx;
  padding-right: 30rpx;
  .form-input {
    height: 110rpx;
    border-bottom: 2rpx solid #efefef;
    .empty {
      color: #999;
    }
    .input-box {
      text-align: right;
    }
  }
  .label {
    padding-top: 40rpx;
    padding-bottom: 24rpx;
  }
  .form-textarea {
    height: 230rpx;
    padding: 30rpx;
    border-radius: 8rpx;
    box-sizing: border-box;
    background-color: #efefef;
    .textarea-box {
      height: 100%;
    }
  }
  .grid-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30rpx;
    .grid-item {
      height: 200rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;
      .cover-image {
        width: 100%;
        height: 100%;
      }
      .icon-close {
        position: absolute;
        right: 10rpx;
        top: 10rpx;
        color: #fff;
        font-size: 20rpx;
        border-radius: 50%;
        padding: 10rpx;
        background-color: $red-color;
      }
    }
    @mixin addIcon {
      content: '';
      position: absolute;
      background-color: #b1b1b1;
    }
    .upload-box {
      background-color: #efefef;
      position: relative;
      &::before {
        width: 110rpx;
        height: 2rpx;
        @include addIcon();
      }
      &::after {
        width: 2rpx;
        height: 110rpx;
        @include addIcon();
      }
    }
  }
  .btn-submit {
    margin: 120rpx 0;
  }
}
</style>
